<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Orion - Free Bootstrap Coming Soon Responsive Template</title>
<meta name="description" content="Coming Soon Responsive Template">
<!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
<!--<link href="css/font-awesome.min.css" rel="stylesheet">-->
<!--<link href="css/main.css" rel="stylesheet">-->

 <script src="js/jquery-1.11.3.js"></script>
</head>
<body>


<div class="login_gl" style="margin-top:10px;">
 <div id="msgdiv"></div>
</div>
<br>
方式一:
<input type="text" id="demo1" placeholder="Fill the query" required value="{user(id:1){id,name}}" name="query">
<button type="button"   value="Subscribe"  onclick="demo('demo1')">Submit</button>
<br>
方式二:
<input type="text" id="demo2" placeholder="Fill the query" required value="{user(id:1){id,name,age}}" name="query">
<button type="button"  value="Subscribe"  onclick="demo('demo2')">Submit</button>

<br>
方式三:
<input type="text" id="demo3" placeholder="Fill the query" required value="{users(page:1,size:50){id,name,age}}" name="query" size="100">
<button type="button"  value="Subscribe"  onclick="demo('demo3')">Submit</button>

 <script type="text/javascript">
  function demo(id){

      var query = $.trim($("#"+id).val());
      var formdata = {query: query};

      console.log(formdata);
      $.ajax({
          type:"POST",
          url:"demo",
          data: formdata,
          dataType:'json',
          success:function(msg,textStatus, request){
              console.log(request);
              console.log(sessionStorage);
              console.log("cookie",document.cookie)
              // var jsessionid= sessionStorage.getItem("JSESSIONID");
              //  console.log("jsessionid="+jsessionid);
              //   jsessionid= sessionStorage.getItem("access_token");
              //  console.log("jsessionid="+jsessionid);
              $("#msgdiv").text(JSON.stringify(msg));
              console.log(msg);
          }
      });
  }
  </script>

<!--<script src="js/jquery-1.11.1.min.js"></script>-->

<!--<script src="js/jquery.backstretch.min.js"></script> -->
<!--<script src="js/wow.min.js"></script> -->
<!--<script src="js/retina.min.js"></script> -->
<!--<script src="js/tweetie.min.js"></script> -->
<!--<script src="js/jquery.downCount.js"></script> -->
<!--<script src="js/jquery.form.min.js"></script> -->
<!--<script src="js/jquery.validate.min.js"></script> -->
<!--<script src="js/jquery.simple-text-rotator.min.js"></script> -->
<!--<script src="js/main.js"></script>-->

<!--<script src="js/gmap.js"></script>-->
</body>
</html>
